<template>
<body  class="body-chart">
      <meta name="viewport" content="user-scalable=no,viewport-fit=cover,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
            <div class="chart-main">
                <nav class="page-nav">
                    <div class="trade-symbol upper">
                        <span class="right chart-padding" @click="handleClose()"> <img src="../../assets/my/right.png"></span>
                        <span class="chart-padding"> <img class="select-buy" @click="drawer()" src="../../assets/select.png" ></span>
                        <span class="draw"  @click="drawer()">{{selectedPair.fname_sn}}</span>
                         <!-- <span > <img @click="addChoose()" :src="chooseImgMsg"></span> -->
                    </div>
                </nav>
                <div class="header">
                    <dl class="info">
                        <dt><h2 class="color-down">{{deptLast.last}}
                                <i class="mobile_icon_up"></i>
                            </h2>
                            <span>≈¥{{filter(deptLast.last*okerRatePrice?deptLast.last*okerRatePrice:'0')}}</span> <span>CNY</span>
                             <span class="color-down">{{filter(selectedPair.fupanddown)}}%</span>
                        </dt>
                        <dd>
                             <span><em>高</em>{{deptLast.high}}</span> 
                            <span><em>低</em>{{deptLast.low}}</span> 
                            <span><em>24H量</em>{{filter(deptLast.vol)}}</span>
                        </dd>
                    </dl>
                </div>
            </div>
            
           <div class="chart-wrap">
               <div class="periods">
                    <button class="secondary-font btn-hover " v-bind:class="btnChart==1?'active':''" @click="btnHover(1)" data-id="5" data-index="1">1min</button>
                   <button class="secondary-font btn-hover " v-bind:class="btnChart==5?'active':''" data-id="5" @click="btnHover(2)" data-index="2">5min</button>
                    <button class="secondary-font btn-hover " v-bind:class="btnChart==15?'active':''" @click="btnHover(3)" data-id="15" data-index="3">15min</button>
                    <button class="secondary-font btn-hover " v-bind:class="btnChart==30?'active':''"  @click="btnHover(4)" data-id="30" data-index="4">30min</button>
                    <button class="secondary-font btn-hover " v-bind:class="btnChart==60?'active':''" @click="btnHover(5)" data-id="60" data-index="5">1H</button>
                    <button class="secondary-font btn-hover " v-bind:class="btnChart=='1D'?'active':''" data-id="1W" data-index="6" @click="btnHover(6)">1D</button>
                </div>
                 <div class="kCrossSelectBoxCon .v-sheet" style=' height: 44px;' v-if="periodBox">
                         <button class="secondary-font v-btn " data-id="15" data-index="3">分时</button>
                          <button class="secondary-font v-btn " data-id="1D" data-index="6">1day</button>
                            <button class="secondary-font v-btn " data-id="30" data-index="4">周线</button>
                            <button class="secondary-font v-btn " data-id="60" data-index="5">月线</button>
                    </div>
                <div id="chart_container" class="f-fill" style="height:375px;width:100%;background:#161736;"></div>
           </div>
            <section class="finance-tabs">
                <button class="tab-exchange "  v-on:click="otcTab()"  v-bind:class="{'active':otcTabs}"><span class="otc-exchange-tab">深度</span></button>
                <button class="tab-otc "  v-on:click="otcTab()" v-bind:class="{'active':!otcTabs}"><span class="otc-exchange-tab" >成交</span></button>
            </section>
             <div  class="chart-list" >
                 <div class="chart-type"><span></span><b>买</b><span></span><b>卖</b></div>
                 <div id="deepChart" style="height:100%;width:100%" >
                </div>
            </div>
            <div class="listitem" style="position: relative;background: #161736;" >
                <div role="listitem" class="greyDarken3--text handicap" v-show="otcTabs">
                    <div class="v-list__tile theme--light">
                            <span class="handicapIndex body-3">
                            买盘
                        </span> <span class="handicapNum body-3">
                            数量
                        </span> <span class="handicapPrzTitle body-3" style="text-align: center;">
                            价格
                        </span> <span class="handicapNum body-3" style="text-align: right;">
                            数量
                        </span> <span class="handicapIndex body-3" style="text-align: right;">
                            卖盘
                        </span>
                    </div>
                </div>
                    <div style=" display: flex;" v-show="otcTabs">
                        <div role="listitem " class="theme_hand">
                            <div class="v-list__tile theme--light handicap" v-for="(item, i) in buyDepthList" v-bind:key="i">
                                <span class="leftBg"><span class="greenHandicapBg" :style="{'width': (item[2]/maxBuyCount*100)+'%'}"></span></span>
                                <span class="handicapIndex body-6 greyDarken3--text">{{i+1}}</span> 
                                <span style="text-align:center" class="handicapNum body-6">{{item[1]}}</span>
                                <span class="handicapPrz body-6 greenDarken--text greenDarken-left" style="text-align: right;">{{item[0]}}</span>
                                <span class="przCenter"></span>
                            </div>
                        </div>

                        <div role="listitem " class="theme_hand">
                            <div class="v-list__tile theme--light handicap" v-for="(item, i) in sellDepthList" v-bind:key="i">
                                <span class="rightBg"><span class="redHandicapBg" :style="{'width': (item[2]/sellBuyCount*100)+'%'}"></span></span>
                                <span class="handicapPrz body-6 redDarken--text">{{item[0]}}</span>
                                <span  class="handicapNum body-6" style="text-align: center;">{{item[1]}}</span>
                                <span class="handicapIndex body-6 greyDarken3--text" style="text-align: right;">{{i+1}}</span>
                            </div>
                        </div>
                    </div>

                     <div role="listitem" class="greyDarken3--text handicap" v-show="!otcTabs">
                    <div class="v-list__tile theme--light">
                            <span class="handicapIndex body-3">
                            类型
                        </span> <span class="handicapNum body-3">
                            价格
                        </span> <span class="handicapPrzTitle body-3" style="text-align: center;">
                            数量
                        </span>
                         <span class="handicapIndex body-3" style="text-align: right;">
                            时间
                        </span>
                    </div>
                </div>
                    <div style=" display: flex;" v-show="!otcTabs">
                        <div role="listitem " style="width:100%">
                            <div class="v-list__tile theme--light handicap" v-for="(item, i) in recentDealList" v-bind:key="i">
                                <span class="handicapIndex body-6 greyDarken3--text" :class="item[3]==1?'color-buy':''" v-if="item[3]==1">买</span> 
                                   <span class="handicapIndex body-6 greyDarken3--text"  :class="item[3]==2?'color-sell':''" v-if="item[3]==2">卖</span> 
                                <span class="handicapNum body-6">{{item[0]}}</span>
                                <span class="handicapNum body-6 greenDarken--text greenDarken-left" style="text-align: center;">{{item[1]}}</span>
                                <span class="handicapNum" style="text-align: right;">{{item[2]}}</span>
                            </div>
                        </div>
                    </div>
                    <div class="nav bottom-nav">
                        <div class="nav-main">
                            <button class="btn bg-buy" data-direct="buy" @click="buyType()">买入</button>
                            <button class="btn bg-sell" data-direct="sell" @click="sellType()">卖出</button>
                        </div>
                    </div>
                <div class="drawer" v-if="chartDrawerShow"  >
                    <div class="drawer-box" v-bind:style="{ left: chartDrawerShow==true?'0px':'',}" v-clickOut="clickOut">
                            <div class="drawer--title">
                            币币
                        </div>
                        <div class="drawer--tabs" id="drawer-tabs">
                            <i class="mobile_icon_fav" v-for="(coin, i) in coinGroup" v-bind:key="i"  @click="changeGroup(coin)">
                                <span class="cur upper" data-coin="usdt" >{{i}}</span>
                            </i>
                        </div>
                            <div class="drawer--content" >
                            <div class="list" v-for="(ticker, i) in tickers" v-bind:key="i" @click="setPairs(ticker)">
                                <dl data-href="btc_usdt">
                                    <dt class="cur fl upper" :class="selectedPair.fid==ticker.fid?'upper-display':''">{{ticker.fname_sn}}</dt>
                                    <dd class="fl">{{ticker.lastDealPrize}}</dd> 
                                </dl>
                            </div>
                        </div>
                    </div>
                    <div style="width:20%"></div>
                </div>
            </div>
</body>
</template>
<script>
import {
	address,
} from '../../../src/service/getData';
 import { Indicator } from 'mint-ui';
  import {mapMutations, mapActions} from 'vuex';
    export default {
      name: "chart",
       watch:{
            buyDepthList:function name(list) {

                if (list) {
                var maxBuyCount = 0
                for (var i = 0; i < list.length; i++) {
                    if (maxBuyCount < list[i][2] * 1) {
                        maxBuyCount = list[i][2] * 1;
                    }
                }
                this.maxBuyCount = maxBuyCount;
            }
            },
               sellDepthList:function name(list) {
                if (list) {
                var sellBuyCount = 0
                for (var i = 0; i < list.length; i++) {
                    if (sellBuyCount < list[i][2] * 1) {
                        sellBuyCount = list[i][2] * 1;
                    }
                }
                this.sellBuyCount = sellBuyCount;
            }
            },
        },
        data: function () {
            return {
                chartDrawerShow:false,
                recentDealList:'',
                currency1: ' ',
                currency2: ' ',
                otcTabs:true,
                chart: null,
                feed: null,
                list: [],
                btnChart:'',
                last_price:1234.2365,
                periodBox:false,
                bars: [
                    
                ],
                 buttons:[],
                 widget:'',
                 selectedPair:'',
                 sellDepthList:'',
                 buyDepthList:'',
                 deptLast:'',
                 maxBuyCount:'',
                 sellBuyCount:'',
                 chooseImgMsg:'',
                 coinGroup:'',
                 tickers:'',
                 okerRatePrice:'',
                 socket:'',
                 socket1:'',
                 interval:'',
                 pair_change:false,
                 onRealtimeCallback:'',
                 cacheData : {},
            }
        },
        mounted: function() {
            document.getElementsByTagName("body")[0].className="chart-body page-finance page-index";
                    !function (w) {
            InitView();
            var evt = "onorientationchange" in w ? "orientationchange" : "resize";
            w.addEventListener(evt, function () {
                InitView()
            }, false);
            function InitView() {
                var t = 375,
                    w = screen.width,
                    h = screen.height,
                    a = w / t,
                    n = w.viewMeta || document.createElement('meta');
                w.viewMeta || document.getElementsByTagName("head")[0].appendChild(n);
                n.setAttribute('name', 'viewport');
                n.setAttribute('content', "width=" + t + ", initial-scale=" + a + ",maximum-scale=" + a + ",minimum-scale=" + a + ", user-scalable=no,target-densitydpi=device-dpi,minimal-ui,uc-fitscreen=no");
                window.viewPortNum = a;
            }
            w.showPlaceholder = 1;
        }(window);
            let dataList='';
            if(localStorage.getItem("choose.fid")){
             JSON.parse(localStorage.getItem("choose.fid")).forEach((res)=>{
                if(parseInt(res)==parseInt(this.$route.query.symbol)){
                    dataList=res;
                    }
                })
            if(dataList){
                    this.chooseImgMsg=require('../../assets/my/choose1.png');
               }else{
                this.chooseImgMsg=require('../../assets/my/choose.png');
                }
            }else{
                 this.chooseImgMsg=require('../../assets/my/choose.png');
            }
             if(this.$route.query.type==1){
                  localStorage.setItem("panelChart",1);
             }else if(this.$route.query.type==2){
                  localStorage.setItem("panelChart",2);
             }
             Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
                });
           this.getAllcoins();
         this.btnChart=(localStorage.getItem('tradingview.resolution') || '5');
        },
        destroyed() {
               this.socket && this.socket.close();
             this.socket1 && this.socket1.close();
                this.socket='';
              this.socket1='';
             document.getElementsByTagName("body")[0].className="page-finance page-index";
        },
        methods: {
              ...mapMutations([
                'SET_HOME_PAGE'
            ]),
              connectWs() {
                     this.pair_change=false;
                  let self=this;
                    let host=address;
                    let resolution;
            self.socket && self.socket.close();
            if((localStorage.getItem('tradingview.resolution') || '5')=='1D'){
            resolution=1440
            }else{
             resolution=   localStorage.getItem('tradingview.resolution') || '5'
            }
             self.socket = io('https://'+host+'/kline?deep=4&token=dev&symbol=' + this.selectedPair.fid+'&step=' + ( resolution* 60), { transports: ['websocket', 'pull'] });
         var i=0;
         let timerKline;
         self.socket.on('kline', function(msg) {
                var newData = eval("(" + msg + ")");
                self.tvData=newData;
                   if(timerKline) clearTimeout(timerKline);//如果500毫秒内又一次触发，则会重新计算时间
                    i++;
                    if(i==1){
                  self.TvJs(self.selectedPair.fShortName);
                }else{
                        self.pair_change=true;
                    self.createFeed().subscribeBars();
                }
                    }, 1000)
        },
        connectWs1(){
                  let self=this;
                  self.socket1 && self.socket1.close();
            self.socket1 = io('https://'+address+'/trade?deep=4&token=dev&symbol=' + this.selectedPair.fid+'&step='+ ((localStorage.getItem('tradingview.resolution') || '5') * 60), { transports: ['websocket', 'pull'] });
             let timerBuy;
           self.socket1.on('entrust-buy', function(msg) {
                shakeBuy();
                 function shakeBuy(){
                    if(timerBuy) clearTimeout(timerBuy);//如果500毫秒内又一次触发，则会重新计算时间
                    timerBuy = setTimeout(() => {
                     self.buyDepthList=eval("(" + msg + ")");
                  self.drawLine(self.buyDepthList, self.sellDepthList )
                    let buyang=0;
              let buyList = []
          for (let i=0;i<self.buyDepthList.length ;i++) {
                buyang = buyang + self.buyDepthList[i][1]
                buyList.push(
                    [
                        self.buyDepthList[i][0],
                        self.buyDepthList[i][1],
                        buyang
                    ]
                )
            }
            self.buyDepthList=buyList;
                    }, 500)
            }
            });
             let timerSell;
            self.socket1.on('entrust-sell', function(msg) {
                shakeSell();
                function shakeSell(){
                    if(timerSell) clearTimeout(timerSell);//如果500毫秒内又一次触发，则会重新计算时间
                    timerSell = setTimeout(() => {
                      self.sellDepthList = eval("(" + msg + ")");
                     self.drawLine(self.buyDepthList, self.sellDepthList )
                         let sellang=0;
              let sellList = []
          for (let i=0;i<self.sellDepthList.length ;i++) {
                sellang = sellang + self.sellDepthList[i][1]
                sellList.push(
                    [
                        self.sellDepthList[i][0],
                        self.sellDepthList[i][1],
                        sellang
                    ]
                )
            }
            self.sellDepthList=sellList;
                    }, 500)
            }
            });
              let timerLog;
            self.socket1.on('entrust-log', function(msg) {
                   shakeSell();
                function shakeSell(){
                    if(timerLog) clearTimeout(timerLog);//如果500毫秒内又一次触发，则会重新计算时间
                    timerLog = setTimeout(() => {
                     self.recentDealList=eval("(" + msg + ")");
                    }, 300)
            }  
            });
            self.socket1.on('real', function(msg) {
                var ticker = eval("(" + msg + ")");
              self.deptLast=ticker;
            });
            self.socket1.on('entrust-update', function(msg) {
                var newData = eval("(" + msg + ")");
            });
        },
        TvJs(pair){
               const this_vue = this;
            this_vue.feed = this_vue.createFeed();
    var skin = "black";
     this.interval=localStorage.getItem('tradingview.resolution') || '5';
     var chartType = (localStorage.getItem('tradingview.chartType') || '1')*1;
    let widget =this.widget= window.tvWidget = new TradingView.widget({
        autosize: true,
        symbol:pair,
        interval: localStorage.getItem('tradingview.resolution') || '5',
        container_id: "chart_container",
        datafeed: this_vue.feed,
        library_path: "static/",
        timezone: 'Asia/Shanghai',
         theme: "Dark",
        locale: "zh",
         custom_css_url: 'bundles/chart.css',
               customFormatters: {
                timeFormatter: {
                    format: function(date) { var _format_str = '%h:%m'; return _format_str.replace('%h', date.getUTCHours()<10?'0'+date.getUTCHours():date.getUTCHours(), 2). replace('%m', date.getUTCMinutes()<10?'0'+date.getUTCMinutes():date.getUTCMinutes(), 2). replace('%s', date.getUTCSeconds(), 2); }
                },
                dateFormatter: {
                    format: function(date) { return date.getUTCFullYear() + '/' + (date.getUTCMonth()+1) + '/' + date.getUTCDate(); }
                }
                },
        disabled_features: [
                "header_symbol_search",
                "header_saveload",
                "header_screenshot",
                "header_chart_type",
                "header_compare",
                "header_undo_redo",
                "timeframes_toolbar",
                "volume_force_overlay",
                "header_resolutions",
                "left_toolbar",
                "header_widget",
        ],
        //preset: "mobile",
        studies_overrides:this_vue.getStudiesOverrides(skin),
         overrides: this_vue.getOverrides(skin),
        charts_storage_url: 'https://saveload.tradingview.com',
        charts_storage_api_version: "1.1",
        client_id: 'tradingview.com',
        user_id: 'public_user_id'
});
  this.chart=widget;
let _this=widget;
let self=this;
let studies=[];

function createStudy(){
     var id;
        id = widget.chart().createStudy('Moving Average', false, false, [20],null,{"plot.color": "rgb(58,113,74)"});
        studies.push(id);
}
function toggleStudy(chartType){
        var state = chartType == 3 ? 0 : 1;
        for(var i = 0; i < studies.length; i++){
                _this.chart().getStudyById(studies[i]).setVisible(state);
        }
}
widget.onChartReady(function(){
    document.getElementById('chart_container').childNodes[0].setAttribute('style', 'display:block;width:100%;height:100%;')
        //设置均线种类 均线样式
    // this.createStudy();
    //生成时间按钮
    //_this.chart().removeAllStudies();
    //createButton(buttons);
        _this.chart().setChartType(chartType);
            toggleStudy(chartType);
             Indicator.close();
        });
        },
        addChoose(){
            let array=[];
            array.push(this.selectedPair.fid);
            if(localStorage.getItem("choose.fid")){
                JSON.parse(localStorage.getItem("choose.fid")).forEach(res=>{
                    if(res!=this.selectedPair.fid){
                    array.push(res);
                    }
                })
            }
            localStorage.setItem("choose.fid",JSON.stringify(array));
        },
              getAllcoins() {
             this.$http.post('/v2/market/allcoins',).then((res)=>{
                let tickers = res.data;
                 let coinGroup = {}
                   let param = location.hash.match(new RegExp(".*" + 'symbol' + "=([^\&]*)(\&?)", "i"));
                  //  let param = localStorage.getItem("trade.symbol");
                     let symbol = param && !isNaN(param[1]) ? param[1] : 0;
                    let current = null;
                    for (let i = 0; i < tickers.length; i++) {
                        let ticker = tickers[i]
                        if (coinGroup[ticker.group] === undefined) {
                            coinGroup[ticker.group] = []
                        }
                        coinGroup[ticker.group].push(ticker);
                        // console.log(coinGroup[ticker.group].push(ticker), "CCCCCCCCCCCCCC")
                        if (symbol && ticker.fid == symbol) {
                            current = ticker
                        }
                    }
                    let newGroup = this.objKeySort(coinGroup)
                    if (!current) {
                        for (let group in newGroup) {
                            current = newGroup[group][0]
                            break;
                        }
                    }
                    this.coinGroup=coinGroup;
                     this.tickers= coinGroup[current.group];
                    this.selectedPair=current;
                  
                    this.setPair(current);
             })
        }, 
        getOkerRatePrice(){
            this.$http.post('v2/market/okexExchangeRate').then((res)=>{
        this.okerRatePrice = res.data.data.futureTicker.rate;
        })
        },
        setPairs(pair){
            Indicator.open({
                text: '加载中...',
                spinnerType: 'fading-circle'
                });
               this.selectedPair=pair;
            // localStorage.setItem("trade.symbol",pair.fid);
             location.hash = this.$router.history.current.path+'?symbol=' +  this.selectedPair.fid;
              this.setPair(pair);
        },
            setPair(pair){
            this.getOkerRatePrice();
             this.selectedPair=pair;
            this.getmarketList();
           this.connectWs(pair);
            this.connectWs1();
            this.refreshUser();
             this.chartDrawerShow=false;
        },
            getmarketList() {
            let self=this;
            this.$http.get('/v2/market/marketRefresh?deep=4&symbol=' + this.selectedPair.fid )
                .then(function(res) {
                    if(res.status==200){
                     self.buyDepthList=res.data.buyDepthList;
                       self.recentDealList=res.data.recentDealList;
                       if(self.sellDepthList){
                            self.sellDepthList.reverse()
                       }
                     // self.drawLine(self.buyDepthList, self.sellDepthList )
                    }
                })
        },
        otcTab(){
            this.otcTabs=!this.otcTabs;
        },
        drawer(){
                    this.chartDrawerShow=!this.chartDrawerShow;
                },
         clickOut(el){
                      this.chartDrawerShow=false;
          },
           filter(res){
            return parseFloat(res).toFixed(2);
         }, 
          changeGroup(res){
            this.tickers=res;
        },
        refreshUser(){
              let self=this;
            this.$http.get('/v2/market/refreshUserInfo?symbol=' + this.selectedPair.fid)
                .then(function(res) {
                    self.entrustList=res.data.entrustList;
                    self.userInfo=res.data;
                })
        },
          objKeySort(obj) {
            var newkey = Object.keys(obj).sort();
            var newObj = {};
            for (var i = 0; i < newkey.length; i++) {
                newObj[newkey[i]] = obj[newkey[i]];
            }
            return newObj;
        },
            btnHover(index){
                 let buttons = [
                    {title:'Time',resolution:'1',chartType:3},
                    {title:'1min',resolution:'1',chartType:1},
                    {title:'5min',resolution:'5',chartType:1},
                    {title:'15min',resolution:'15',chartType:1},
                    {title:'30min',resolution:'30',chartType:1},
                    {title:'1hour',resolution:'60',chartType:1},
                    {title:'1day',resolution:'1D',chartType:1},
                    {title:'1week',resolution:'1W',chartType:1},
                    {title:'1month',resolution:'1M',chartType:1},
            ];
             let button=buttons[index];
                this.btnChart=button.resolution;
                        if(this.btnChart==localStorage.getItem('tradingview.resolution')){
                            return false;
                        }
                  
                       let self=this;
                    let host=address
            self.socket && self.socket.close();
            let resolution='';
             if(button.resolution=='1D'){
            resolution=1440
            }else{
             resolution=   button.resolution
            }
              localStorage.setItem('tradingview.resolution',resolution);
                    localStorage.setItem('tradingview.chartType',button.chartType);
             self.socket = io('https://'+host+'/kline?deep=4&token=dev&symbol=' + this.selectedPair.fid+'&step=' + ((resolution || '5') * 60), { transports: ['websocket', 'pull'] });
             var i=0;
                self.pair_change=false;
                var ticker = self.selectedPair.fShortName + "-" + localStorage.getItem('tradingview.resolution') || '5';
                   if(self.cacheData[ticker]){
                          self.tvData=self.cacheData[ticker];
                     self.widget.chart().setResolution(button.resolution, function onReadyCallback() {});
                    }
                    let timer;
                self.socket.on('kline', function(msg) {
                       if(timer) clearTimeout(timer);//如果500毫秒内又一次触发，则会重新计算时间
                    timer = setTimeout(() => {
                var newData = eval("(" + msg + ")");
                self.tvData=newData;
                i++;
                if(i==1){
                 self.widget.chart().setResolution(button.resolution, function onReadyCallback() {});
                }else{
                        self.pair_change=true;
                    self.createFeed().subscribeBars();
                }
                    },500)
            });
            },
            periodBoxWrap(){
                this.periodBox= !this.periodBox;
            },
            handleClose(){
                 this.$router.push({ name: 'home',query: {symbol: this.selectedPair.fid} });
            },
            drawLine(res,req){
        let myChart = this.$echarts.init(document.getElementById('deepChart'));
        var shu = 0;
        var dataAsks=[],dataBids=[];
    for (var i = 0; i < res.length; i++) {
        shu = shu + res[i][1]
        dataAsks.push(
            [
                res[i][0],
                shu.toFixed(8)
            ]
        )
        }
         var liang = 0;
        req=req;
        for (var i=0;i< req.length ; i++) {
            liang = liang + req[i][1]
            dataBids.unshift(
                [
                    req[i][0],
                    liang.toFixed(8)
                ]
            )
        }
       let option = {
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    lineStyle: {
                      type: 'dashed',
                      globalCoord: false,
                      color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                      }
                    },
                  },
                  padding: 10,
                  backgroundColor :"transparent",
            },
            grid: {
                left: '13px',
                right: '3px',
                bottom: '3px',
                containLabel: true
            },
              xAxis: {
                type: 'value',
                min: 'dataMin',
                max: 'dataMax',
                splitLine: {
                  lineStyle: {
                    color: 'transparent'
                  }
                },
                axisLabel: {
                  textStyle: {
                    color: "#6d87a8"
                  }
                },
             
              },
              yAxis: [
                {
                  type: 'value',
                  nameLocation: 'middle',
                  max: 'dataMax',
                  axisLine: {
                    lineStyle: {
                      color: 'transparent'
                    },
                  },
                }, {
                  axisLabel: {
                    show: true,
                    textStyle: {
                      color: "#6d87a8"
                    }
                  },
                  axisLine: { show: true },
                  axisTick: { show: true },
                  splitLine: { show: false }
                }],
            series : [
                getSeries({
                    name: '委托量',
                    step: 'start',
                    colorStops: ['rgba(81, 214, 173, 0.2)', 'rgba(81, 214, 173, 0.2)'],
                    lineStyleColors: 'rgba(0,192,135,1)',
                    itemStyleColors: 'rgba(0,192,135,1)',
                    type: 'line',
                    data: dataAsks
                  }),
                    getSeries({
                    name: '委托量',
                    step: 'end',
                    colorStops: ['rgba(243, 109, 125, 0.2)', 'rgba(243, 109, 125, 0.2)'],
                    lineStyleColors: 'rgba(255,120,88,1)',
                    itemStyleColors: 'rgba(255,120,88,1)',
                    data: dataBids,
                  })
            ]
        };
       
        myChart.setOption(option);
            function getSeries(config){
            var { name, step = '', colorStops = [], lineStyleColors = '', itemStyleColors = '', data = [] } = config
            return {
              name,
              type: 'line',
              yAxisIndex: 1,
              step: step,
              showSymbol: false,
              hoverAnimation: false,
              symbolSize: 10,
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: colorStops[0]
                    }, {
                      offset: 1, color: colorStops[1]
                    }]
                  }
                }
              },
              lineStyle: {
                normal: {
                  color: lineStyleColors
                }
              },
              itemStyle: {
                normal: {
                  color: itemStyleColors,
                  borderWidth: 4
                }
              },
              data
            }
            }
            },
             getOverrides :function(theme){
    var themes = {
        "white": {
            //url: "day.css",
            up: "#03c087",
            down: "#ef5555",
            bg: "#ffffff",
            grid: "#f7f8fa",
            cross: "#23283D",
            border: "#9194a4",
            text: "#9194a4",
            areatop: "rgba(71, 78, 112, 0.1)",
            areadown: "rgba(71, 78, 112, 0.02)",
            line: "#737375"
        },
        "black": {
            //url: "night.css",
            up: "rgb(61, 222, 119)",
            down: "rgb(251, 114, 96)",
            bg: "rgba(22, 23, 54, 1)",
            grid: "#162539",
            cross: "#6d87a8",
            border: "#6d87a8",
            text: "#6d87a8",
            areatop: "rgba(122, 152, 247, .1)",
            areadown: "rgba(122, 152, 247, .02)",
            line: "#fff"
        },
        "mobile": {
            //url: "mobile.css",
            up: "#03C087",
            down: "#E76D42",
            bg: "#ffffff",
            grid: "#f7f8fa",
            cross: "#23283D",
            border: "#C5CFD5",
            text: "#8C9FAD",
            areatop: "rgba(71, 78, 112, 0.1)",
            areadown: "rgba(71, 78, 112, 0.02)",
            showLegend: !0
        }
    };
    var t = themes[theme];
    return {
        "volumePaneSize": "medium",
        "scalesProperties.lineColor": t.text,
        "scalesProperties.textColor": t.text,
        "paneProperties.background": t.bg,
        "paneProperties.vertGridProperties.color": t.grid,
        "paneProperties.horzGridProperties.color": t.grid,
        "paneProperties.crossHairProperties.color": t.cross,
        "paneProperties.legendProperties.showLegend": !!t.showLegend,
        "paneProperties.legendProperties.showStudyArguments": !0,
        "paneProperties.legendProperties.showStudyTitles": !0,
        "paneProperties.legendProperties.showStudyValues": !0,
        "paneProperties.legendProperties.showSeriesTitle": !0,
        "paneProperties.legendProperties.showSeriesOHLC": !0,
        "mainSeriesProperties.candleStyle.upColor": t.up,
        "mainSeriesProperties.candleStyle.downColor": t.down,
        "mainSeriesProperties.candleStyle.drawWick": !0,
        "mainSeriesProperties.candleStyle.drawBorder": !0,
        "mainSeriesProperties.candleStyle.borderColor": t.border,
        "mainSeriesProperties.candleStyle.borderUpColor": t.up,
        "mainSeriesProperties.candleStyle.borderDownColor": t.down,
        "mainSeriesProperties.candleStyle.wickUpColor": t.up,
        "mainSeriesProperties.candleStyle.wickDownColor": t.down,
        "mainSeriesProperties.candleStyle.barColorsOnPrevClose": !1,
        "mainSeriesProperties.hollowCandleStyle.upColor": t.up,
        "mainSeriesProperties.hollowCandleStyle.downColor": t.down,
        "mainSeriesProperties.hollowCandleStyle.drawWick": !0,
        "mainSeriesProperties.hollowCandleStyle.drawBorder": !0,
        "mainSeriesProperties.hollowCandleStyle.borderColor": t.border,
        "mainSeriesProperties.hollowCandleStyle.borderUpColor": t.up,
        "mainSeriesProperties.hollowCandleStyle.borderDownColor": t.down,
        "mainSeriesProperties.hollowCandleStyle.wickColor": t.line,
        "mainSeriesProperties.haStyle.upColor": t.up,
        "mainSeriesProperties.haStyle.downColor": t.down,
        "mainSeriesProperties.haStyle.drawWick": !0,
        "mainSeriesProperties.haStyle.drawBorder": !0,
        "mainSeriesProperties.haStyle.borderColor": t.border,
        "mainSeriesProperties.haStyle.borderUpColor": t.up,
        "mainSeriesProperties.haStyle.borderDownColor": t.down,
        "mainSeriesProperties.haStyle.wickColor": t.border,
        "mainSeriesProperties.haStyle.barColorsOnPrevClose": !1,
        "mainSeriesProperties.barStyle.upColor": t.up,
        "mainSeriesProperties.barStyle.downColor": t.down,
        "mainSeriesProperties.barStyle.barColorsOnPrevClose": !1,
        "mainSeriesProperties.barStyle.dontDrawOpen": !1,
        "mainSeriesProperties.lineStyle.color": t.border,
        "mainSeriesProperties.lineStyle.linewidth": 1,
        "mainSeriesProperties.lineStyle.priceSource": "close",
        "mainSeriesProperties.areaStyle.color1": t.areatop,
        "mainSeriesProperties.areaStyle.color2": t.areadown,
        "mainSeriesProperties.areaStyle.linecolor": t.border,
        "mainSeriesProperties.areaStyle.linewidth": 1,
        "mainSeriesProperties.areaStyle.priceSource": "close"
    }
},
             getStudiesOverrides:function(theme){
                var themes = {
                    "white": {
                        c0: "#eb4d5c",
                        c1: "#53b987",
                        t: 70,
                        v: !1
                    },
                    "black": {
                        c0: "#fd8b8b",
                        c1: "#3cb595",
                        t: 70,
                        v: !1
                    }
                };
                var t = themes[theme];
                return {
                    "volume.volume.color.0": t.c0,
                    "volume.volume.color.1": t.c1,
                    "volume.volume.transparency": t.t,
                    "volume.options.showStudyArguments": t.v
                }
            },
           buyType(){
            localStorage.setItem("panelChart",1);
            this.SET_HOME_PAGE({homePage:3});
             this.$router.push({ name: 'home',query: {symbol: this.selectedPair.fid} });
        },
            sellType(){
            localStorage.setItem("panelChart",2);
             this.SET_HOME_PAGE({homePage:3});
              this.$router.push({ name: 'home',query: {symbol: this.selectedPair.fid} });
        },
            changePair: function(){
                let this_vue = this;
                // console.log(this.chart && this.feed)
                 if(this.chart && this.feed){
                    this.feed._fireEvent('pair_change');
                    this.chart.activeChart().resetData();
                    // this.chart.activeChart().setSymbol(this.selectedPair.fShortName+'-'+this.interval, function(){
                    //     console.log("GOWNO :: proba zmiany",this.selectedPair.fShortName+'-'+this.interval);
                    // });
                }
            },
            createFeed: function(){
                let this_vue = this;
                let Datafeed = {};

                  Datafeed.DataPulseUpdater = function(datafeed, updateFrequency) {
                    this._datafeed = datafeed;
                    this._subscribers = {};

                    this._requestsPending = 0;
                    var that = this;

                    var update = function() {
                        if (that._requestsPending > 0) {
                            return;
                        }

                        for (var listenerGUID in that._subscribers) {
                            var subscriptionRecord = that._subscribers[listenerGUID];
                            var resolution = subscriptionRecord.resolution;

                            var datesRangeRight = parseInt((new Date().valueOf()) / 1000);

                            //	BEWARE: please note we really need 2 bars, not the only last one
                            //	see the explanation below. `10` is the `large enough` value to work around holidays
                            var datesRangeLeft = datesRangeRight - that.periodLengthSeconds(resolution, 10);

                            that._requestsPending++;

                            (function(_subscriptionRecord) { // eslint-disable-line
                                that._datafeed.getBars(_subscriptionRecord.symbolInfo, resolution, datesRangeLeft, datesRangeRight, function(bars) {
                                        that._requestsPending--;

                                        //	means the subscription was cancelled while waiting for data
                                        if (!that._subscribers.hasOwnProperty(listenerGUID)) {
                                            return;
                                        }

                                        if (bars.length === 0) {
                                            return;
                                        }

                                        var lastBar = bars[bars.length - 1];
                                        if (!isNaN(_subscriptionRecord.lastBarTime) && lastBar.time < _subscriptionRecord.lastBarTime) {
                                            return;
                                        }

                                        var subscribers = _subscriptionRecord.listeners;

                                        //	BEWARE: this one isn't working when first update comes and this update makes a new bar. In this case
                                        //	_subscriptionRecord.lastBarTime = NaN
                                        var isNewBar = !isNaN(_subscriptionRecord.lastBarTime) && lastBar.time > _subscriptionRecord.lastBarTime;

                                        //	Pulse updating may miss some trades data (ie, if pulse period = 10 secods and new bar is started 5 seconds later after the last update, the
                                        //	old bar's last 5 seconds trades will be lost). Thus, at fist we should broadcast old bar updates when it's ready.
                                        if (isNewBar) {
                                            if (bars.length < 2) {
                                                throw new Error('Not enough bars in history for proper pulse update. Need at least 2.');
                                            }

                                            var previousBar = bars[bars.length - 2];
                                            for (var i = 0; i < subscribers.length; ++i) {
                                                subscribers[i](previousBar);
                                            }
                                        }

                                        _subscriptionRecord.lastBarTime = lastBar.time;

                                        for (var i = 0; i < subscribers.length; ++i) {
                                            subscribers[i](lastBar);
                                        }
                                    },

                                    //	on error
                                    function() {
                                        that._requestsPending--;
                                    });
                            })(subscriptionRecord);
                        }
                    };

                    if (typeof updateFrequency != 'undefined' && updateFrequency > 0) {
                        setInterval(update, updateFrequency);
                    }
                };

                Datafeed.DataPulseUpdater.prototype.periodLengthSeconds = function(resolution, requiredPeriodsCount) {
                    var daysCount = 0;

                    if (resolution === 'D') {
                        daysCount = requiredPeriodsCount;
                    } else if (resolution === 'M') {
                        daysCount = 31 * requiredPeriodsCount;
                    } else if (resolution === 'W') {
                        daysCount = 7 * requiredPeriodsCount;
                    } else {
                        daysCount = requiredPeriodsCount * resolution / (24 * 60);
                    }

                    return daysCount * 24 * 60 * 60;
                };

                Datafeed.DataPulseUpdater.prototype.subscribeDataListener = function(symbolInfo, resolution, newDataCallback, listenerGUID) {
                    this._datafeed._logMessage('Subscribing ' + listenerGUID);

                    if (!this._subscribers.hasOwnProperty(listenerGUID)) {
                        this._subscribers[listenerGUID] = {
                            symbolInfo: symbolInfo,
                            resolution: resolution,
                            lastBarTime: NaN,
                            listeners: []
                        };
                    }

                    this._subscribers[listenerGUID].listeners.push(newDataCallback);
                };

                Datafeed.DataPulseUpdater.prototype.unsubscribeDataListener = function(listenerGUID) {
                    this._datafeed._logMessage('Unsubscribing ' + listenerGUID);
                    delete this._subscribers[listenerGUID];
                };

                Datafeed.Container = function(updateFrequency){
                    this._configuration = {
                        supports_search: false,
                        supports_group_request: false,
                        supported_resolutions: ['1', '3', '5', '15', '30', '60', '120', '240', '360', '720', '1D', '3D', '1W', '1M'],
                        supports_marks: true,
                        supports_timescale_marks: true,
                        exchanges: ['USDP']
                    };

                    this._barsPulseUpdater = new Datafeed.DataPulseUpdater(this, updateFrequency || 10 * 1000);
                    // this._quotesPulseUpdater = new Datafeed.QuotesPulseUpdater(this);

                    this._enableLogging = true;
                    this._callbacks = {};

                    this._initializationFinished = true;
                    this._fireEvent('initialized');
                    this._fireEvent('configuration_ready');
                };

                Datafeed.Container.prototype._fireEvent = function(event, argument) {
                    if (this._callbacks.hasOwnProperty(event)) {
                        var callbacksChain = this._callbacks[event];
                        for (var i = 0; i < callbacksChain.length; ++i) {
                            callbacksChain[i](argument);
                        }

                        this._callbacks[event] = [];
                    }
                };

                Datafeed.Container.prototype._logMessage = function(message) {
                    if (this._enableLogging) {
                        var now = new Date();
                        // console.log("CHART LOGS: "+now.toLocaleTimeString() + '.' + now.getMilliseconds() + '> ' + message);
                    }
                };

                Datafeed.Container.prototype.on = function(event, callback) {
                    if (!this._callbacks.hasOwnProperty(event)) {
                        this._callbacks[event] = [];
                    }

                    this._callbacks[event].push(callback);
                    return this;
                };

                Datafeed.Container.prototype.onReady = function(callback) {
                    let that = this;
                    if (this._configuration) {
                        setTimeout(function() {
                            callback(that._configuration);
                        }, 0);
                    }
                    else {
                        this.on('configuration_ready', function() {
                            callback(that._configuration);
                        });
                    }
                };

                Datafeed.Container.prototype.resolveSymbol = function(symbolName, onSymbolResolvedCallback, onResolveErrorCallback) {
                    this._logMessage("GOWNO :: resolve symbol "+ this_vue.selectedPair.fShortName+'-'+this_vue.interval);
                    Promise.resolve().then(() => {

                        function adjustScale(){
                            if(this_vue.last_price>1000)
                                return 100;
                            else
                                return 100000000;
                        }
                        onSymbolResolvedCallback({
                            "name": this_vue.selectedPair.fShortName+'-'+this_vue.interval,
                            "pricescale": adjustScale(),

                            "ticker": this_vue.selectedPair.fShortName,
                           'timezone': 'Asia/Shanghai',
                        'minmov': 1,
                        'minmov2': 0,
                        'pointvalue': 1,
                        'fractional': false,
                        //设置周期
                        'session': '24x7',
                        'has_intraday': true,
                        'has_no_volume': false,  
                        //设置是否支持周月线
                        "has_daily":true,
                        //设置是否支持周月线
                        "has_weekly_and_monthly":true,
                            'supported_resolutions': ['1', '5', '15', '30', '60', '240','1D', '5D', '1W', '1M'],
                            "has_no_volume": false,
                        });
                    })
                };

                Datafeed.Container.prototype.getBars = function(symbolInfo, resolution, rangeStartDate, rangeEndDate, onDataCallback, onErrorCallback) {
                 //  console.log('noData',rangeStartDate,new Date(rangeEndDate))
                //   if (rangeStartDate > 0 && (rangeStartDate + '').length > 10) {
                //         throw new Error(['Got a JS time instead of Unix one.', rangeStartDate, rangeEndDate]);
                //     }
                //        this_vue.list=[];
                //    this_vue.tvData.forEach(function (a) { // in subscribeBars
                //         this_vue.list.push({
                //     time:  a[0] * 1000,
                //     open: a[3],
                //     high: a[5],
                //     low: a[6],
                //     close: a[4],
                //     volume: a[7],
                // })
                //     });
                    onDataCallback([], { noData: true });
                  //  onDataCallback(this_vue.list, { noData: true , nextTime: data.nb || data.nextTime });
                };

                Datafeed.Container.prototype.subscribeBars = function(symbolInfo, resolution, onRealtimeCallback, listenerGUID, onResetCacheNeededCallback,onLoadedCallback) {
                   var ticker = this_vue.selectedPair.fShortName + "-" + localStorage.getItem('tradingview.resolution') || '5';
                 console.log( this_vue.tvData)
                 if(!this_vue.pair_change){
                     this_vue.onRealtimeCallback=onRealtimeCallback;
                        this_vue.list=[];
                   this_vue.tvData.forEach(function (a) { // in subscribeBars
                        this_vue.list.push({
                    time:  a[0] * 1000,
                    open: a[3],
                    high: a[5],
                    low: a[6],
                    close: a[4],
                    volume: a[7],
                })
                    });
                     if(!this_vue.cacheData[ticker]){
                    this_vue.cacheData[ticker] =  this_vue.list;
                    }else{
                        this_vue.list=this_vue.cacheData[ticker]
                    }
                   this_vue.list[this_vue.list.length]=this_vue.list[this_vue.list.length-1];
                   this_vue.list.forEach(function (bar) { // in subscribeBars
                        onRealtimeCallback(bar)
                    });
                   }
                   if(this_vue.onRealtimeCallback){
                    if(this_vue.pair_change){
                        var barList=[];
                         this_vue.list=[];
                   this_vue.tvData.forEach(function (a) { // in subscribeBars
                        this_vue.list.push({
                    time:  a[0] * 1000,
                    open: a[3],
                    high: a[5],
                    low: a[6],
                    close: a[4],
                    volume: a[7],
                })
                 });
                 barList.push(this_vue.list[this_vue.list.length-1])
                          barList.forEach(function (bar) { // in subscribeBars
                        this_vue.onRealtimeCallback(bar)
                    });
               }
               }else{
                      this_vue.onRealtimeCallback=onRealtimeCallback;
                        this_vue.list=[];
                   this_vue.tvData.forEach(function (a) { // in subscribeBars
                        this_vue.list.push({
                    time:  a[0] * 1000,
                    open: a[3],
                    high: a[5],
                    low: a[6],
                    close: a[4],
                    volume: a[7],
                })
                    });
                       if(!this_vue.cacheData[ticker]){
                    this_vue.cacheData[ticker] =  this_vue.list;
                    }else{
                        this_vue.list=this_vue.cacheData[ticker]
                    }
                   this_vue.list[this_vue.list.length]=this_vue.list[this_vue.list.length-1];
                   this_vue.list.forEach(function (bar) { // in subscribeBars
                        onRealtimeCallback(bar)
                    });
               }
                };

                Datafeed.Container.prototype.unsubscribeBars = function(listenerGUID) {
                    this._barsPulseUpdater.unsubscribeDataListener(listenerGUID);
                };

                return new Datafeed.Container;
            },
            adjustChart: function(){
                let chart_iframe = $("#chart_container").find("iframe");
                let chart_top = chart_iframe.contents().find(".header-chart-panel");
                let chart_top_container = chart_iframe.contents().find(".header-chart-panel-content");
                let chart_bottom = chart_iframe.contents().find(".date-range-wrapper");
                chart_bottom.appendTo(chart_top_container);
            }
        },
       directives : {
                clickOut: {
                    bind: function(el, binding) {
                        let  self=this;
                    function handler(e) {
                            if(e.target.className=="draw" ||e.target.className=="select-buy"){
                                return false
                            }
                        if (el.contains(e.target)){
                            return false
                    }
                    
                    if (binding.expression) {
                        binding.value()
                    }
                    }
                    el.handler = handler
                    document.addEventListener('click', el.handler)
                    },
                    unbind: function(el) {
                    document.removeEventListener('click', el.handler)
                    }    
                }
                },

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.upper-display {
    color: #5298FE !important;
}
.chart-main .info {
    height: 80px;
    width: 100%;
    padding: 10px 30px 0;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
}
.chart-main  .info>dt {
    -ms-flex: 1;
    flex: 1;
}
.chart-main  .info>dd {
    width: 100px;
}
.chart-main  .info>dt h2 {
    font-size: 32px;
    margin-bottom: 16px;
    color: #cfd3e9;
}
.chart-main .info>dt span {
    color:rgba(173, 173, 216, 1)
}
.color-down, .color-sell {
    color: #d14b64!important;
}
.color-buy{
    color: #06CDA8 !important;
}
.chart-main .info>dd span {
    display: block;
    margin-bottom: 10px;
    text-align: right;
      color: rgba(173, 173, 216, 1);
}
.v-btn {
    margin: 0;
    min-width: 60px;
    width: 23%;
    border-radius: 1px;
    position: relative;
    -webkit-box-shadow: none;
    box-shadow: none;
        height: 38px;
            color:#fff;
}
.periods .active{
    color:#E0E0F9;
     border-bottom:1px solid #E0E0F9;
}
.v-btn{
        -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 2px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 500;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 88px;
    outline: 0;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: .3s cubic-bezier(.25,.8,.5,1),color 1ms;
    transition: .3s cubic-bezier(.25,.8,.5,1),color 1ms;
    position: relative;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    top:3px;
}
.btn-active{
      border:1px solid #4377ff;
        background: transparent;
}
.theme_hand{
    width: 50%;
}
.v-sheet {
    display: block;
    border-radius: 2px;
    position: relative;
    -webkit-transition: .3s cubic-bezier(.25,.8,.5,1);
    transition: .3s cubic-bezier(.25,.8,.5,1);
}
 .kCrossSelectBoxCon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    overflow: hidden;
    position: absolute;
    z-index: 3;
    width: calc(100% + 32px);
    background:rgba(34,34,64,1);
}
.chart-main .info>dd span em {
    float: left;
    text-align: left;
}
.body-chart .finance-tabs .active{
border-bottom: 2px solid #3381FF;
}
.body-chart{
    height: 100%;
    min-height: 100vh;
}
 .chart-wrap .periods {
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 20px;
    line-height: 20px;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    color: #6d87a8;
    font-size: 12px;
}
.periods button{
    color: #6d87a8;
        font-size: 10px;
}
 .chart-wrap .periods span {
    text-align: center;
    white-space: nowrap;
    border-bottom: 4px solid transparent;
}
.chart-type{
    position: absolute;
    padding-top: 20px;
    margin-right: 20px
}
.chart-type span{
    width:16px;
height:16px;
}
.chart-type span{
    margin-right: 10px;
}
.chart-type span:nth-child(1){
   background: #06CDA8;
}
.chart-type span:nth-child(3){
    background: #F36D7D;
}
.chart-type b{
    font-size:16px;
    font-weight:600;
    padding-top: 5px;
}
.chart-type b:nth-child(2){
    color: #06CDA8;
    margin-left: 10px;
    margin-right: 40px;
}
.chart-type b:nth-child(4){
    color: #F36D7D;
    margin-left: 10px;
    margin-right: 10px;
}
.handicap .v-list__tile {
    overflow: hidden;
    height: 25px!important;
    position: relative;
}
.mintui{
    font-size:24px;
}
.listitem{
    margin-top: 0px;
    padding-bottom: 80px;
}
.page-index{
    height: 100%;
}
.v-list__tile {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 16px;
    font-weight: 400;
    height: 48px;
    margin: 0;
    padding: 0 16px;
    position: relative;
    text-decoration: none;
    -webkit-transition: background .3s cubic-bezier(.25,.8,.5,1);
    transition: background .3s cubic-bezier(.25,.8,.5,1);
}
.handicap .v-list__tile span {
    display: inline-block;
    float: left;
    z-index: 1;
}
.v-btn:before {
    border-radius: inherit;
    color: inherit;
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    opacity: .12;
    -webkit-transition: .3s cubic-bezier(.25,.8,.5,1);
    transition: .3s cubic-bezier(.25,.8,.5,1);
    width: 100%;
}

.v-list__tile span{
   color: #FFFFFF;
   font-size: 12px;
}
 .v-list__tile span {
    display: inline-block;
    float: left;
    z-index: 1;
}
 .v-list__tile {
    overflow: hidden;
    height: 25px!important;
    position: relative;
}
.handicap .leftBg, .handicap .rightBg {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.handicap .rightBg span{
    min-width: 1%;
    max-width: 100%;
    float: left;
    height: 100%;
    background: rgba(243, 109, 125, 0.2)
}
.handicap .handicapIndex {
    width: 24%;
}
.handicap .handicapNum {
    width: 34%;
}
.handicap .handicapPrz {
    width: 46%;
}
.handicap .przCenter {
    width: 8%;
}
.handicap .leftBg {
    left: 0px;
}
.handicap .handicapPrzTitle{
        width: 52%;
}
.handicap .leftBg span {
    min-width: 1%;
    max-width: 100%;
    float: right;
    height: 100%;
    background: rgba(81, 214, 173, 0.2);
}
.handicap .rightBg {
    right: 0px;
    height: 100%;
}
 .bottom-nav {
    background: #172841;
    box-shadow: 0 0 16px 0 #081724;
    color: #6d87a8;
    /* height: 164px; */
    white-space: nowrap;
}

.chart-list{
    background: #161736;
    height:400px;position: relative;
    display: flex;
    justify-content: center;
    position: relative;
    top:-10px;
}
.bg-buy, .bg-up {
    background: rgba(81, 214, 173, 1);
}

 .bottom-nav button.fav {
    width: 110px;
    margin-right: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-size: 20px;
    color: #6d87a8;
}
  section.finance-tabs {
    height: 54px;
    display: -ms-flexbox;
    display: flex;
    left: 0;
    z-index: 1;
    background: #222240;
    position: relative;
    top:-5px;
    bottom: -5px;
}
section.finance-tabs button {
    width: 50%;
    color: #E0E0F9;
    position: relative;
    font-size: 16px;
    -ms-flex: 1;
    flex: 1;
    font-weight: 700;
}
.nav-main{
   padding: 6px 10px 0;
    height: 96px;
    box-shadow: 0 0 16px rgba(0,0,0,.1);
    position: fixed;
    bottom: -4px;
    right: 0;
    left: 0;
    z-index: 9;
    display: flex;
    justify-self: center;
    align-self: auto;
    align-content: center;
    align-items: center;
    justify-content: center;
}
.bottom-nav button:nth-child(1) {
    height: 42px;
    margin-right: 20px;
    float: left;
    margin-top: 6px;
}
.bottom-nav button:nth-child(2) {
    height: 42px;
    margin-left: 20px;
    float: left;
    margin-top: 6px;
}
 .bottom-nav button.btn {
    width: 150px;
    color: #fff;
    font-size: 14px;
}
.bg-sell {
    background: rgba(243, 109, 125, 1);
}
.body-chart .trade-symbol img{
    width: 20px;
    height: 20px;
}
.body-chart .trade-symbol{
    height: 60px;
    font-size: 24px;
    font-weight: 700;
    line-height: 60px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.body-chart .trade-symbol .right{
    margin-left: 10px;
    margin-right: 5px;
}
.body-chart .trade-symbol .draw{
    margin-right: 10px;
    color: #E0E0F9;
    width: 70%;
    font-size: 16px;
    margin-left: 10px;
    margin-top: 2px;
    padding-top: 10px;
}

.body-chart .drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 10;
    background: rgba(0,0,0,0.65);
    transition: all .3s;
    height: 100%;
}

.body-chart .drawer-box {
      opacity:1;
    width: 300px;
    height: 100%;
     z-index: 11;
    background: #222240;
    overflow: auto;
    position: relative;
    transition: all .3s;
    left: -630px;
    color: #E0E0F9
}

.body-chart .drawer--title {
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    padding-left: 15px;
    position: absolute;
    top: 10px;
    left: 0;
    width: 600px;
    font-weight: 700;
    color: #E0E0F9
}

.body-chart .drawer--title i {
    font-size: 30px;
    margin-right: 32px
}

.body-chart .drawer--tabs {
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #222240;
    padding-left: 15px;
    position: absolute;
    top: 60px;
    left: 0;
    width: 600px;
    overflow-x: auto;
    white-space: nowrap;
    word-wrap: break-word;
    font-size: 0;
    background: #161736;
}
.list >dl{
    display: flex;
}
.body-chart .drawer--tabs span {
    font-size: 16px;
    font-weight: 500;
    margin-right: 60px;
    min-width: 50px;
    color: #E0E0F9
}

.body-chart .drawer--tabs span i {
    vertical-align: unset
}
.body-chart .drawer--content .upper-display{
    vertical-align: unset;
    font-size: 16px;
}
.body-chart .drawer--tabs span.cur {
    color: inherit;
     font-size: 18px;
}

.body-chart .drawer--content {
    padding: 90px 40px 0 15px
}

.body-chart .drawer--content .partition {
    height: 64px;
    padding-top: 30px;
    box-sizing: border-box;
    font-size: 28px;
    color: #1882d4;
    font-weight: 700
}

.body-chart .drawer--content .lists .no-info {
    height: 480px;
    text-align: center;
    color: #c5cfd5;
    font-size: 24px;
    box-sizing: border-box;
    padding-top: 110px
}
.body-chart .chart-padding{
        padding-top: 10px;
}
.body-chart .drawer--content .lists .no-info img {
    display: block;
    margin: 0 auto 20px
}

.body-chart .drawer--content .list:last-of-type dl:nth-last-of-type(1) {
    border-bottom: none
}
.body-chart .drawer--content .list {
   font-size: 14px;
}
.body-chart .drawer--content dl {
    height: 50px;
    line-height: 50px;
    box-sizing: border-box;
    border-bottom: 1px solid #758696
}

.body-chart .drawer--content dt {
    width: 300px;
    font-weight: 500
}

.body-chart .drawer--content dt.cur {
    color: #E0E0F9
}

.body-chart .drawer--content dd {
    width: 200px;
    text-align: right;
    color: #51D6AD;
    font-size: 14px;
}

</style>
